<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>医生排班管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        neutral: '#F2F3F5',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
                        'card-hover': '0 10px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #165DFF 0%, #36CFC9 100%);
            }
            .transition-custom {
                transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            }
            .hover-lift {
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }
            .hover-lift:hover {
                transform: translateY(-2px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
            .scale-in {
                animation: scaleIn 0.3s ease forwards;
            }
            @keyframes scaleIn {
                from {
                    transform: scale(0.95);
                    opacity: 0;
                }
                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }
        }
    </style>

    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #F8FAFC;
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .table-cell-animate {
            transition: background-color 0.2s ease;
        }

        .btn-animate {
            transition: all 0.2s ease;
        }

        .btn-animate:hover {
            transform: translateY(-1px);
        }

        .btn-animate:active {
            transform: translateY(0);
        }

        .scrollbar-thin::-webkit-scrollbar {
            width: 6px;
        }

        .scrollbar-thin::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        .scrollbar-thin::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 10px;
        }

        .scrollbar-thin::-webkit-scrollbar-thumb:hover {
            background: #a1a1a1;
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen">
<!-- 主内容区 -->
<main class="container mx-auto px-4 py-8">
    <!-- 页面标题 -->
    <div class="mb-8 text-center">
        <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-dark mb-2 flex items-center justify-center gap-3">
            <i class="fa fa-calendar-check-o text-primary text-2xl"></i>
            医生排班管理
        </h2>
        <p class="text-gray-500 max-w-2xl mx-auto">管理医生排班信息，优化医院资源分配，提升医疗服务效率</p>
    </div>
    </div>
    <!-- 排班表格 -->
    <div class="bg-white rounded-xl shadow-card overflow-hidden">
        <div class="bg-gradient-blue p-6">
            <h3 class="text-white text-xl font-bold">医生排班信息</h3>
            <p class="text-blue-100 mt-1">共 <span class="font-medium" th:text="${#lists.size(schedules)}">N</span> 条排班记录</p>
        </div>

        <div class="p-6">
            <div class="overflow-x-auto scrollbar-thin">
                <table class="w-full">
                    <thead>
                    <tr class="bg-gray-50">
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">医生姓名</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">科室</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">值班日期</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">班次</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">状态</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">上班时间</th>
                        <th class="py-3 px-4 text-left text-gray-600 font-medium uppercase tracking-wider">下班时间</th>
                        <th class="py-3 px-4 text-right text-gray-600 font-medium uppercase tracking-wider">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="schedule : ${schedules}" class="border-b border-gray-100 hover:bg-gray-50 table-cell-animate">
                        <td class="py-4 px-4" th:text="${schedule.doctor_name}">张医生</td>
                        <td class="py-4 px-4">
                            <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800" th:text="${schedule.department}">内科</span>
                        </td>
                        <td class="py-4 px-4" th:text="${schedule.work_date}">2023-06-15</td>
                        <td class="py-4 px-4">
                            <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800" th:text="${schedule.shift}">上午班</span>
                        </td>
                        <td class="py-4 px-4">
                            <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800" th:text="${schedule.status}">待处理</span>
                        </td>
                        <td class="py-4 px-4" th:text="${schedule.startTime}">08:00</td>
                        <td class="py-4 px-4" th:text="${schedule.endTime}">12:00</td>
                        <td class="py-4 px-4 text-right">
                            <div class="flex justify-end space-x-2">
                                <a th:href="@{/admin/schedule/editByDoctorId/{doctor_id}(doctor_id=${schedule.doctor_id})}" class="btn-animate px-3 py-1 rounded-lg bg-primary text-white">排班</a>

                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- 分页 -->
    <div class="flex flex-col sm:flex-row justify-between items-center mt-8">
        <div class="text-sm text-gray-600 mb-4 sm:mb-0">
            显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span class="font-medium">24</span> 条记录
        </div>
        <div class="flex space-x-2">
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 disabled:opacity-50" disabled>
                <i class="fa fa-chevron-left"></i>
            </button>
            <button class="btn-animate px-3 py-1 rounded-lg bg-primary text-white">1</button>
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">2</button>
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">3</button>
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">4</button>
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">5</button>
            <button class="btn-animate px-3 py-1 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50">
                <i class="fa fa-chevron-right"></i>
            </button>
        </div>
    </div>
    </div>
    </div>
</main>

<!-- 悬浮返回顶部按钮 -->
<button id="backToTop" class="fixed bottom-6 right-6 p-3 rounded-full bg-primary text-white shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90 focus:outline-none">
    <i class="fa fa-chevron-up"></i>
</button>

<script>
    // 返回顶部按钮逻辑
    const backToTopButton = document.getElementById('backToTop');

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTopButton.classList.remove('opacity-0', 'invisible');
            backToTopButton.classList.add('opacity-100', 'visible');
        } else {
            backToTopButton.classList.remove('opacity-100', 'visible');
            backToTopButton.classList.add('opacity-0', 'invisible');
        }
    });

    backToTopButton.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });

    // 模拟数据加载动画
    document.addEventListener('DOMContentLoaded', () => {
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach((row, index) => {
            row.style.opacity = '0';
            row.style.transform = 'translateY(10px)';

            setTimeout(() => {
                row.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
                row.style.opacity = '1';
                row.style.transform = 'translateY(0)';
            }, 100 * index);
        });
    });
    function filterSchedules() {
        const keyword = document.getElementById("searchInput").value;

        fetch("/admin/schedule/search?keyword=" + encodeURIComponent(keyword))
            .then(response => response.text())
            .then(html => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, "text/html");
                const newTableBody = doc.querySelector("tbody");

                // 替换当前表格内容
                document.querySelector("tbody").innerHTML = newTableBody.innerHTML;
            })
            .catch(error => console.error("搜索失败:", error));
    }
</script>
</body>
</html>